<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#box{
				width: 800px;
				/* height: 300px; */
				margin: 30px auto;
				background-color: #a6eff5;
			}
			#top{
				width: 500px;
				height: 140px;
				margin: 10px auto;
			}
			#text_box{
				width:30px;
				text-align: center;
				border: none;
				background-color: #a6eff5;
			}
			table{
				width: 700px;
				margin: 0 auto;
				text-align: center;
			}
			#name{
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="top">
				书籍名称：<input type="text" id="name" /><br />
				出版日期：<input type="date" name="" id="tdate" value="" /><br>
				<!-- <select id="sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select><br /> -->
				价格：<input type="text" id="price" /><br><br>
				<input type="button" value="添加">
				<input type="button" value="保存" class="truexiugai" style="display: none;" />
				<input type="button" value="删除全部" id="dqb" /><br />
			</div>
			<table border="1px">
				<tr>
					<!-- <td>选择</td> -->
					<th>序号</th>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var i = 1;
		$(function() {
			$("input[value='添加']").click(function() {
				//获得书籍名称
				var name = $("#name").val();
				//获得价格
				var price = $("#price").val();
				var tdate = $("#tdate").val();
				// var sex = $("option").val();
				

				$("<tr>").append($("<td>").text(i++))
					.append($("<td>").text(name))
					// .append($("<td>").text(sex))
					.append($("<td>").text(tdate))
					.append($("<td>").text(price))
					.append($("<td>").append($("<button id='add'>").text("-")).append($("<input id='text_box' value='1'>")).append(
						$("<button id='min'>").text("+")))
					.append($("<td>").append($("<button id='btn_del'>").text("删除")).append($("<a href='#' class='bj'>").text("编辑")))
					.appendTo($("table"));

				$("#btn_del").click(function() {
					$(this).parent().parent().remove();
				});
				//全部删除                
				$("#dqb").click(function() {
					$("table>tbody>tr:gt(0)").remove();
				});

				$(".bj", "td").click(function() {

					$("input[value='添加']").show()

					var name = $(this).parent().siblings("td:nth-child(2)").text();
					var sex = $(this).parent().siblings("td:nth-child(3)").text();
					var price = $(this).parent().siblings("td:nth-child(4)").text();
					$("#name").val(name);
					$("#tdate").val(tdate);
					$("input[value='添加']").hide();
					$(".truexiugai").show();
					var that = $(this)
					//点击确认修改时
					$(".truexiugai").on("click", function() {
						// 获取信息
						var name = $("#name").val();
						var tdate = $("#tdate").val();
						var price = $("#price").val();
						that.parent().siblings("td:nth-child(2)").text(name);
						that.parent().siblings("td:nth-child(3)").text(tdate);
						that.parent().siblings("td:nth-child(4)").text(price);
					});
				});
			});
		});
		$(document).ready(function() {
			//获得文本框对象
			var t = $("#text_box");
			//初始化数量为1,并失效减
			$('#min').attr('disabled', true);
			//数量增加操作
			$("#add").click(function() {
				// 给获取的val加上绝对值，避免出现负数
				t.val(Math.abs(parseInt(t.val())) + 1);
				if (parseInt(t.val()) != 1) {
					$('#min').attr('disabled', false);
				};
			})
			//数量减少操作
			$("#min").click(function() {
				t.val(Math.abs(parseInt(t.val())) - 1);
				if (parseInt(t.val()) == 1) {
					$('#min').attr('disabled', true);
				};
			})
		});
	</script>
</html>
